import { createRouter, createWebHashHistory } from 'vue-router'
import TopCategory from '@/views/category'
import SubCategory from '@/views/category/sub'
import { h } from 'vue'
const Layout = () =>
    import ('@/views/layout.vue')
const Home = () =>
    import ('@/views/home/index.vue')
const Login = () =>
    import ('@/views/login/index.vue')
const Goods = () =>
    import ('@/views/goods/index')
const LoginCallback = () =>
    import ('@/views/login/callback')
const Cart = () =>
    import ('@/views/cart/index.vue')
const MemberLayout = () =>
    import ('@/views/member/Layout')
const MemberHome = () =>
    import ('@/views/member/home')
const MemberOrder = () =>
    import ('@/views/member/order')
const MemberOrderDetail = () =>
    import ('@/views/member/order/detail')
const Checkout = () =>
    import ('@/views/member/pay/checkout')
const Pay = () =>
    import ('@/views/member/pay/index')
const PayResult = () =>
    import ('@/views/member/pay/result')
const routes = [
        //一级路由布局容器
        {
            path: '/',
            component: Layout,
            children: [
                { path: '/', component: Home },
                { path: '/category/:id', component: TopCategory },
                { path: '/category/sub/:id', component: SubCategory },
                { path: '/product/:id', component: Goods },
                { path: '/cart', component: Cart },
                { path: '/member/checkout', component: Checkout },
                { path: '/member/pay', component: Pay },
                { path: '/pay/callback', component: PayResult },
                {
                    path: '/member',
                    component: MemberLayout,
                    children: [
                        { path: '/member', component: MemberHome },
                        {
                            path: '/member/order/',
                            // vue3.0 需要有嵌套关系才能模糊匹配    
                            component: { render: () => h( < RouterView / > ) },
                            children: [
                                { path: '', component: MemberOrder },
                                { path: ':id', component: MemberOrderDetail }
                            ]
                        }
                    ]
                },
            ]
        },
        { path: '/login', component: Login },
        { path: '/login/callback', component: LoginCallback }
    ]
    //创建一个路由实例
const router = createRouter({
    //使用hash方式实现路由
    history: createWebHashHistory(),
    //配置路由规则
    routes,
    scrollBehavior() {
        return { left: 0, top: 0 }
    }
})

export default router